<template>
	<div class="gn_companymesg">
		<div class="company_details">
			<div class="mesg_tit">
				{{orderTypeName}}
				<span class="orderstate_tips ostate1">{{emergencyDegree}}</span>
			</div>
			<div class="order_left ">
				<div class="order_mesg clearfix">
					<div class="line_list clearfix line100 order_stateline" >
						<span class="line_listtit fl">状态：</span>
						<div class="line_listinput" >
							{{status}}
						</div>
					</div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">创建人：</span>
						<div class="line_listinput" >
							{{userName}}
						</div>
					</div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">创建时间：</span>
						<div class="line_listinput" >
							{{gmtCreate}}
						</div>
					</div>

					 <div class="line_list clearfix" >
					 	<span class="line_listtit fl">处理人：</span>
					 	<div class="line_listinput" >
					 		{{operationUserName}}
					 	</div>
					 </div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">处理时间：</span>
						<div class="line_listinput" >
							{{gmtModified}}
						</div>
					</div>

					<div class="line_headtips"><span>客户</span></div>
					<div class="line_list clearfix" >
						<span class="line_listtit fl">客户姓名：</span>
						<div class="line_listinput" >
							{{customerName}}
						</div>
					</div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">客户电话：</span>
						<div class="line_listinput" >
							{{customerPhone}}
						</div>
					</div>

					<div class="line_headtips"><span>联系人</span></div>
					<div class="line_list clearfix" >
						<span class="line_listtit fl">联系人姓名：</span>
						<div class="line_listinput" >
							{{contactName}}
						</div>
					</div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">联系人电话：</span>
						<div class="line_listinput" >
							{{contactPhone}}
						</div>
					</div>

					<div class="line_headtips"><span>房屋信息</span></div>
					<div class="line_list clearfix line100" >
						<span class="line_listtit fl">房屋地址：</span>
						<div class="line_listinput" >
							{{address}}
							<a @click="goDetail">房屋信息详情</a>
						</div>
					</div>

					<div>
						<div class="line_list clearfix line100" v-if="show">
							<span class="line_listtit fl">设备信息：</span>
							<div class="line_listinput" >
								{{equipmentInfoDtos[0].classes}}
							</div>
						</div>
						<div class="line_list clearfix line100" v-else>
							<span class="line_listtit fl">设备信息：</span>
							<div class="line_listinput">{{equipmentInfoDtos}}</div>
						</div>
					</div>

					<div class="line_headtips"><span>任务信息</span></div>
					<div class="line_list clearfix" >
						<span class="line_listtit fl">紧急程度：</span>
						<div class="line_listinput" >
							{{emergencyDegree}}
						</div>
					</div>

					<div class="line_list clearfix" >
						<span class="line_listtit fl">任务类型：</span>
						<div class="line_listinput" >
							{{workTypeDesc}}
						</div>
					</div>
					<div class="line_list clearfix line100" >
						<span class="line_listtit fl">任务描述：</span>
						<div class="line_listinput" >
							{{desc}}
						</div>
					</div>

					<div class="line_headtips"><span>指派</span></div>
					<div class="line_list clearfix line_listeditbox">
						<span class="line_listtit fl"><i class="clred">*</i>处理人：</span>
						<div class="overh" >
							<el-input v-model="showName" :disabled="true" v-if="isShowName"></el-input>
							<el-select v-model="handelUserId" placeholder="请选择" v-if="isShowP">
							    <el-option
							      v-for="item in handelUserIdlist"
							      :key="item.id"
							      :label="item.operationName"
							      :value="item.id">
							    </el-option>
							</el-select>
							<!-- <p class="line_edittips">*该工单只会指派给 #厂家名称# 厂家人员</p> -->
						</div>
					</div>
				</div>
				<div>
				    <div class="order_mesg clearfix" >
						<div v-if="listDataShow">
							<div class="line_headtips"><span>故障描述</span></div>
						<div v-for="item in listDataPic">
							<div class="line_list clearfix" >
								<span class="line_listtit fl">故障类型：</span>
								<div class="line_listinput">
									{{item.faultTypeName}}
								</div>
							</div>
							<div class="line_list clearfix">
								<span class="line_listtit fl">故障描述：</span>
								<div class="line_listinput">
									{{item.faultDesc}}
								</div>
							</div>
							<div class="line_list clearfix" style="display: flex; flex-direction: column;width: 100%">
								<span class="line_listtit fl">故障图片：</span>
								<div class="line_listinput" style="display: block;padding-left: 50px;width: 100%">
									<div style="width: 100%;display: flex;flex-direction: row;justify-content: flex-start;align-items:center;flex-wrap:wrap;">
										<img :src="pic" v-for="pic in item.imagesList" alt="" style="width:100px;height:100px;border: 1px solid #eee;margin-right: 10px;margin-bottom:10px;">
									</div>
								</div>
							</div>
						</div>
						</div>
						
						<div v-if="showHandle">
							<div class="line_headtips"><span>处理描述</span></div>
							<div class="line_list clearfix" >
								<span class="line_listtit fl">处理方式：</span>
								<div class="line_listinput" >
									{{handleTypeName}}
								</div>
							</div>

							<div class="line_list clearfix" >
								<span class="line_listtit fl">处理过程：</span>
								<div class="line_listinput" >
									{{handleDesc}}
								</div>
							</div>
							<div class="line_list clearfix" style="display: flex; flex-direction: column;width: 100%">
								<span class="line_listtit fl">处理图片：</span>
								<div class="line_listinput" style="display: block;padding-left: 50px;width: 100%">
									<div style="width: 100%;display: flex;flex-direction: row;justify-content: flex-start;align-items:center;flex-wrap:wrap;">
										<img :src="i" v-for="i in handleImages" alt="" style="width:100px;height:100px;border: 1px solid #eee;margin-right: 10px;margin-bottom:10px;">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="order_btnbox">
					<el-button type="success" v-if="workOrderState == 6 ? true : false" @click="handlePhone(contactPhone)">回访拨号</el-button>
					<el-button v-if="workOrderState == 6 ? true : false" @click="newRecordBtn">新增回访记录</el-button>
					<el-button type="success" v-if="(workOrderState == 0 || workOrderState == 1) ? true : false" @click="trueBtn">指派处理人</el-button>
	  				<el-button type="info" v-if="isShowClose">关闭工单</el-button>
				</div>
				
			</div>
			<!-- gm流程右边gm -->
			<div class="order_right">
				<p class="order_recordtit">工单跟进记录</p>
				<div class="orderrecordlist" v-for="(item,index) in recordlist" :key="index">
					<p class="order_timetit">{{item.gmtCreate}}</p>
					<p class="order_persontit">{{item.roleName}} {{item.name}}</p>
					<p>{{item.desc}}</p>
				</div>
			</div>

		</div>
		<!-- gm回访gm -->
	    <el-dialog title="回访" :visible.sync="dialogHandle" center width='450px' :close-on-click-modal="false" :show-close="false">
	      <div class="dialogall_ctext">
	        <div class="line_list clearfix line_listeditbox" >
				<span class="line_listtit fl"><i class="clred">*</i>回访描述：</span>
				<div class="overh" >
					<el-input type="textarea" v-model="descHandle"></el-input>
				</div>
			</div>
	      </div>
	      <div slot="footer" class="dialog-footer">
	        <el-button @click="dialogHandle = false">取 消</el-button>
	        <el-button type="primary" @click="trueHandleBtn">确 定</el-button>
	      </div>
	    </el-dialog>
			<!-- gm分配gm -->
	</div>
</template>

<script>
  import { 
		getWorkOrder,
		getBusinessPersonnelList,
		getWorkOrderRecordList,
		workOrderStatus,picImg,
		record,
		pxbPhoneCallback,
		workOrderVisit } from '@/api'
export default{
  data(){
		return{
			dialogHandle:false,
      		descHandle:'',
			status:"",
			userName:'',
			gmtCreateDate:'',
			gmtModifiedDate: '',
			handelUserIdlist:[],
			handelUserId:"",// 指派处理人id
			recordlistDate:[],
			isShowClose: true, //关闭工单按钮
			isShowP: true, //指派人按钮
			isShowName: false, //处理人姓名
			showName: '', //处理人姓名
			orderTypeName: '', //工单类型 （上门服务工单）
			equipmentInfoDtos: '', //设备信息
			houseId: '', //房屋id
			workOrderId: '', // 工单ID
			show: false,
			emergencyDegree:'',
			desc:'',
			address:'',
			contactPhone:'',
			contactName:'',
			customerPhone:'',
			customerName:'',
			operationUserName:'',
			workTypeDesc:'',
			operationUserName:'',
			handleTypeName: '', //处理名称
			handleDesc: '', // 处理过程
			handleImages: [], //处理图片
			pic: [],
			workOrderState: '',
			listDataPic: [],
			picSrc: [],
			listData: [],
			showHandle: null,
			listDataShow: null
		}
  },
  created(){
		this.workOrderId = this.$route.query.id // 工单id
		let workOrderState = this.$route.query.workOrderState // 工单状态
		this.workOrderState = workOrderState
		this.houseId = this.$route.query.houseId // 房屋id
		// let emergencyDegreeName = this.$route.query.emergencyDegreeName //任务类型（是否紧急）
		switch(workOrderState) {
			case 0: 
				this.isShowClose = true
				this.isShowP = true
				this.isShowName = false
				this.showName = this.$route.query.handleUserName
			break;
			case 1:
				this.isShowClose = true
				this.isShowP = true
				this.isShowName = false
				this.showName = this.$route.query.handleUserName
			break;
			case 2: 
				this.isShowClose = true
				this.isShowP = false
				this.isShowName = true
				this.showName = this.$route.query.handleUserName
			break;
			case 3: 
				this.isShowClose = false
				this.isShowP = false
				this.isShowName = true
				this.showName = this.$route.query.handleUserName
			break;
			case 4: 
				this.isShowClose = false
				this.isShowP = false
				this.isShowName = true
				this.showName = this.$route.query.handleUserName
			break;
			case 6: 
				this.isShowClose = false
				this.isShowP = false
				this.isShowName = true
				this.showName = this.$route.query.handleUserName
			break;
		}
		let params={
			workOrderId: this.workOrderId
		}
		//调用查询
		this.workOrder(params)  

		let paramsE = {
			equipmentIds: this.workOrderId
		}
		//调用可用业务人员查询（工单处理人）
		this.businessPersonnelList(paramsE)

		//工单跟踪记录
		let paramsRecordLlist = {
			workOrderId: this.workOrderId
		}
		this.getWorkOrderRecordList(paramsRecordLlist)
		let recordParams = {
			workOrderId: this.workOrderId
		}
		this.record(recordParams)
	},
	methods:{
		trueBtn() {//指派处理人确认按钮
			let params ={
				workOrderId: this.workOrderId,
				handelUserId: this.handelUserId,
				status: 1
			}
			this.workOrderStatus(params)
		},
		workOrderStatus(params){    //工单状态修改接口（）
			workOrderStatus(params).then(res => {   
				let code = res.data.code;
				if(code == 0){
					this.isShowP = false
					this.isShowName = true
					
					this.$router.back(-1)
				}else if(code == 1){
					this.$message({
						message: "请选择处理人"//res.data.msg
					})
				}
			})
		},
		goDetail() {
			this.$router.push({
				path: '/home/housedetails',
				query: {
					houseId: this.houseId
				}
			})
		},
		//工单进度
		getWorkOrderRecordList(paramsRecordLlist) {
			getWorkOrderRecordList(paramsRecordLlist).then(res => {
				let code = res.data.code
				if (code == 0) {
					let data = res.data.data
					this.recordlistDate = data
				}
			})
		},
		businessPersonnelList(params){    //可用业务人员查询接口（获取工单处理人下拉列表）
			getBusinessPersonnelList(params).then(res => {   
				let code = res.data.code;
				if(code == 0){
					let data = res.data.data;
					this.handelUserIdlist = data;
				}else if(code == 1){
					this.$message({
						message: res.data.msg
					})
				}
			})
		},
		//工单详细信息查询接口
		workOrder(params){                     
			getWorkOrder(params).then(res => {
				let code = res.data.code;
				if(code == 0){
					console.log()
					let data = res.data.data;
					this.status= data.status
					this.userName = data.userName
					this.gmtCreateDate = data.gmtCreate
					this.operationUserName = data.operationUserName
					this.gmtModifiedDate = data.gmtModified
					this.customerName = data.customerName
					this.customerPhone = data.customerPhone
					this.contactName = data.contactName
					this.contactPhone = data.contactPhone
					this.address = data.address
					this.classes = data.classes
					this.emergencyDegree = data.emergencyDegree
					this.workTypeDesc = data.workTypeDesc
					this.desc = data.desc
					this.orderTypeName = data.orderTypeName
					this.handleTypeName = data.handleTypeName, //处理名称
					this.handleDesc = data.handleDesc, // 处理过程
					this.handleImages = data.handleImagesList//处理图片

					if (data.handleTypeName !== '' && data.handleTypeName !== null ) {
						this.showHandle = true
					} else {
						this.showHandle = false
					}
					if (data.equipmentInfoDtos.length > 0) {
						this.show = true
						this.equipmentInfoDtos = data.equipmentInfoDtos
					} else {
						this.show = false
						this.equipmentInfoDtos = ''
					}
					this.loading = false
				}else if(code == 1){
					this.$message({
						message: res.data.msg
					})
				}
			})
		},
		getDate (item) {
			var date =  new Date(item);
			// var y = 1900+date.getYear();
			// var m = "0"+(date.getMonth()+1);
			// var d = "0"+date.getDate();
			// return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length)
			var Y = date.getFullYear() + '-';
	        var M = (date.getMonth()+1 <= 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
	        var D = (date.getDate()+1 <= 10 ? '0'+date.getDate() : date.getDate() )+ ' ';
	        var h = (date.getHours()+1 <= 10 ? '0'+date.getHours() : date.getHours() )+ ':';
	        var m = (date.getMinutes()+1 <= 10 ? '0'+date.getMinutes() : date.getMinutes() )+ ':';
	        var s = (date.getSeconds()+1 <= 10 ? '0'+date.getSeconds() : date.getSeconds() );
	        return Y+M+D+h+m+s;
		},
		// picImg (params) {
		// 	picImg(params).then(res => {
		// 		let code = res.data.code
		// 		if (code == 0) {
		// 			this.pic.push(res.data.msg)
		// 		}
		// 	})
		// },
		// imgSrc(params) {
		// 	picImg(params).then(res => {
		// 		// console.log(res)
		// 		let code = res.data.code
		// 		if (code == 0) {
		// 			this.picSrc.push(res.data.msg)
		// 		}
		// 	})
		// },
		record (params) {//故障描述的接口调用
			record(params).then(res => {
				let code = res.data.code
				if (code == 0) {
					this.listDataPic = res.data.data.list
					if (res.data.data.list.length === 0) {
						this.listDataShow = false
					} else {
						this.listDataShow = true
					}
				}
			})
		},
		// 回访开始--gm
	      	handlePhone(phone){//回访按钮
	      		//this.dialogHandle=true
	      		let params = {
			  		device: sessionStorage.getItem('device'),
			  		called: this.contactPhone//列表没有电话号码
			  	}
			  	this.phoneCallback (params)

	      	},
			trueHandleBtn(){//确定添加回访数据---拨打电话并且填写记录
				let params={
					workOrderId:this.workOrderId,
					desc:this.descHandle
				}
				console.log(params)
				this.workOrderVisit(params)
				this.dialogHandle=false;
			},
			newRecordBtn(){
				this.dialogHandle=true
			},
			phoneCallback (params) { //调入呼出电话接口(立即回拨)
			  	pxbPhoneCallback (params).then(res => {
					let code = res.data.code;
					if(code == 0){
						// this.$router.push({
						// 	path: '/home/oncall',
						// 	query: {
						// 		callPhone: this.callPhone
						// 	}
						// })
						// bus.$emit('hideEvent', true)
						this.$message({
							message: '呼出成功,请填写回访记录'
						})
					}else if(code == 1){
						this.$message({
							message: '分机号错误!'
						})
					}else if(code == 2){
						this.$message({
							message: '被叫号错误!'
						})
					}
					else if(code == 3){
						this.$message({
							message: '呼叫失败!'
						})
					}
					
				});
			},
			workOrderVisit(params){
				workOrderVisit(params).then(res => {   
					let code = res.data.code;
					if(code == 0){
						this.$message({
							message: '添加回访记录成功'
						})
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
	//回访结束 --gm
	},
	computed: {
		gmtCreate () {
			return this.getDate(this.gmtCreateDate)
		},
		gmtModified() {
			return this.getDate(this.gmtModifiedDate)
		},
		recordlist () {
			return this.recordlistDate.map(v => {
				return {
					gmtCreate: this.getDate(v.gmtCreate),
					desc: v.desc,
					name: v.name,
					roleName: v.roleName
				}
			})
		}
		// listDataPic () {
		// 	return this.listData.map((i, ind) => {
		// 		return {
		// 			faultDesc: i.faultDesc,
		// 			faultTypeId: i.faultTypeId,
		// 			faultTypeName: i.faultTypeName,
		// 			images: this.picSrc,
		// 			operationUserId: i.operationUserId,
		// 			operationUserName: i.operationUserName,
		// 			time: i.time
		// 		}
		// 	})
		// }
	}
};
</script>

<style scoped>
.orderstate_tips {
  color: #fff;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
}
.ostate1 {
  background: #fa637b;
}
.order_stateline {
  color: #fa637b;
}
.line_headtips {
  margin: 0 10px 10px;
  border-bottom: 1px solid #eee;
}
.line_headtips span {
  display: block;
  width: 100px;
  text-align: center;
  color: #01d39a;
  font-weight: bold;
  border-bottom: 2px solid #01d39a;
}
.line_listinput a {
  margin-left: 20px;
  color: #01d39b;
  cursor: pointer;
}
.line_listeditbox {
  line-height: 40px;
  width: 100%;
}
.line_edittips {
  display: block;
  color: #fa637b;
  font-size: 12px;
  margin-left: 5px;
}
.clred {
  color: #fa637b;
  padding-right: 2px;
  font-style: normal;
}
.order_btnbox {
  padding: 15px 0;
  text-align: center;
}
.order_left {
  float: left;
  width: 70%;
}
.order_right {
  float: right;
  min-width: 170px;
  max-width:30%;
}
.orderrecordlist {
  position: relative;
  padding-left: 30px;
  padding-bottom: 20px;
  background: url("../../../static/image/flow_bg.png") no-repeat;
}
.order_timetit {
  position: absolute;
  top: -5px;
  color: #01d39a;
  font-size: 12px;
  font-weight: bold;
}
.order_persontit {
  padding-top: 20px;
}
.order_recordtit {
  padding: 10px 0;
  font-weight: bold;
}
</style>